<template>
  <div class="limited-row">
    <!-- 左侧内容 -->
    <div class="left-content">
      <h1 class="page-title">{{ item.title || "测试详情" }}</h1>
      <!-- 任务描述信息 -->
      <el-descriptions
        labelClassName="descriptions-label-class"
        content-class-name="descriptions-content-class"
        :column="4" border direction="vertical">
        <el-descriptions-item label="负责人">
          <user-and-avatar :user-id="item.executorId"></user-and-avatar>
        </el-descriptions-item>
        <el-descriptions-item label="测试状态">
          <dict-tag :options="dict.type.test_status" :value="item.status"/>
        </el-descriptions-item>
        <el-descriptions-item label="结果">
          <dict-tag :options="dict.type.test_outcome" :value="item.outcome"/>
        </el-descriptions-item>
        <el-descriptions-item label="优先级">
          <dict-tag :options="dict.type.test_priority" :value="item.priority"/>
        </el-descriptions-item>
        <el-descriptions-item label="项目id">{{ item.projectId }}</el-descriptions-item>
        <el-descriptions-item label="工作项ID">{{ item.workItemId }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ item.createdAt }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ item.updatedAt }}</el-descriptions-item>
      </el-descriptions>
      <div class="menu">
        <!-- 菜单 -->
        <el-menu
          :default-active="activeIndex"
          active-text-color="#409EFF"
          background-color="#fff"
          mode="horizontal"
          text-color="#666"
          @select="(key) => (activeIndex = key)"
        >
          <el-menu-item index="1">基本信息</el-menu-item>
          <el-menu-item index="2">前置条件</el-menu-item>
          <el-menu-item index="3">用例步骤</el-menu-item>
          <el-menu-item index="4">工作项</el-menu-item>
          <el-menu-item index="5">缺陷</el-menu-item>
        </el-menu>
      </div>


      <!-- 动态内容展示 -->
      <div class="content-box">
        <div v-show="activeIndex === '1'">
          <p class="content-title">描述</p>
          <div class="content-text" v-html="item.description"></div>
        </div>
        <div v-show="activeIndex === '2'">
          <p class="content-title">前置条件</p>
          <div class="content-text" v-html="item.preconditions"></div>
        </div>
        <div v-show="activeIndex === '3'">
          <el-table :data="testStepList">
            <el-table-column label="编号" prop="stepId" width="100"></el-table-column>
            <el-table-column label="步骤" prop="description"></el-table-column>
            <el-table-column label="预期" prop="expectedValue"></el-table-column>
            <el-table-column label="实际" prop="actualValue">
              <template slot-scope="scope">
                <el-input v-model="scope.row.actualValue" placeholder="请输入实际结果"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="结果" prop="outcome" width="100">
              <template slot-scope="scope">
                <el-select v-model="scope.row.outcome" clearable>
                  <el-option
                    v-for="dict in dict.type.test_outcome"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="activeIndex === '4'">
          <h1 class="page-title">{{ work.title || "任务详情" }}</h1>
          <!-- 任务描述信息 -->
          <el-descriptions
            labelClassName="descriptions-label-class"
            content-class-name="descriptions-content-class"
            :column="4" border direction="vertical">
            <el-descriptions-item label="负责人">
              <user-and-avatar :user-id="work.assignee"></user-and-avatar>
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              <dict-tag :options="dict.type.work_status" :value="work.status"/>
            </el-descriptions-item>
            <el-descriptions-item label="优先级">
              <dict-tag :options="dict.type.priority" :value="work.priority"/>
            </el-descriptions-item>
            <el-descriptions-item label="类型">
              <dict-tag :options="dict.type.work_type" :value="work.type"/>
            </el-descriptions-item>
            <el-descriptions-item label="开始时间">{{ work.startDate }}</el-descriptions-item>
            <el-descriptions-item label="截至时间">{{ work.dueDate }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ work.createdAt }}</el-descriptions-item>
            <el-descriptions-item label="更新时间">{{ work.updatedAt }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div v-show="activeIndex === '5'">
          <el-table @row-click="showFlawItem" :data="flawList">
            <el-table-column label="主键" align="center" prop="flawId"/>
            <el-table-column label="标题" align="center" prop="title"/>
            <el-table-column label="负责人ID" align="center" prop="responsibleId"/>
            <el-table-column label="严重程度" align="center" prop="severity">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.order_of_severity" :value="scope.row.severity"/>
              </template>
            </el-table-column>
            <el-table-column label="缺陷类型" align="center" prop="defectClass">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.defect_class" :value="scope.row.defectClass"/>
              </template>
            </el-table-column>
            <el-table-column label="重现概率" align="center" prop="recurrenceProbability">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.recurrence_probability" :value="scope.row.recurrenceProbability"/>
              </template>
            </el-table-column>
            <el-table-column label="创建人ID" align="center" prop="createdBy"/>
          </el-table>
        </div>
      </div>
    </div>

    <!-- 右侧内容 -->
    <div class="right-content">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1" title="执行信息">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="测试计划ID">{{ item.testPlanId }}</el-descriptions-item>
            <el-descriptions-item label="执行人">
              <user-and-avatar :user-id="item.executorId"></user-and-avatar>
            </el-descriptions-item>
            <el-descriptions-item label="优先级">
              <dict-tag :options="dict.type.test_priority" :value="item.priority"/>
            </el-descriptions-item>
            <el-descriptions-item label="执行结果">
              <dict-tag :options="dict.type.test_outcome" :value="item.outcome"/>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item name="2" title="记录结果">
          <div class="result-container">
            <div class="tag-container">
              <el-tag
                v-for="item in testStatusType"
                :key="item.dictLabel"
                :type="item.listClass"
                :effect="nowOutCome !== item.dictValue ? 'plain' : 'dark'"
                @click="nowOutCome = item.dictValue"
              >
                {{ item.dictLabel }}
              </el-tag>
            </div>
            <el-input
              type="textarea"
              autosize
              :autosize="{ minRows: 2, maxRows: 7 }"
              v-model="item.remarks"
            ></el-input>
            <div class="button-container">
              <el-button class="new-defect" @click="showAddFlaw=true">新建缺陷</el-button>
              <el-button class="save" @click="save">保存</el-button>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item name="5" title="工时">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="预估工时">{{ item.estimatedWorkingHours }}</el-descriptions-item>
            <el-descriptions-item label="登记工时">{{ item.registerWorkingHours }}</el-descriptions-item>
            <el-descriptions-item label="剩余工时">
              {{ Math.max(item.estimatedWorkingHours - item.registerWorkingHours, 0) }}
            </el-descriptions-item>
            <el-descriptions-item label="工时进度">
              <el-progress
                :percentage="(Math.min(item.registerWorkingHours/item.estimatedWorkingHours,1)*100).toFixed(0)*1.0||0"></el-progress>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item name="6" title="基础信息">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="更新人">
              <user-and-avatar :userId="item.updatedBy"></user-and-avatar>
            </el-descriptions-item>
            <el-descriptions-item label="更新时间">{{ item.updatedAt }}</el-descriptions-item>
            <el-descriptions-item label="创建人">
              <user-and-avatar :userId="item.createdBy"></user-and-avatar>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ item.createdAt }}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-dialog append-to-body :visible.sync="showAddFlaw" title="添加缺陷" width="1650px">
      <add-flaw :test="item" v-if="showAddFlaw" @upData="showAddFlaw=false"></add-flaw>
    </el-dialog>
  </div>
</template>
<script>
import UserAndAvatar from "@/components/UserAndAvatar/index.vue";
import {editTestAndTestStepVo, getTestAllInit, getTest} from "@/api/projectUser/userTest";
import {listAllTestStep} from "@/api/projectUser/userTestStep";
import {getDicts} from "@/api/system/dict/data";
import AddFlaw from "@/components/Project/addFlaw.vue";
import {listAllFlaw} from "@/api/projectUser/userFlaw";
import {getWorkById} from "@/api/projectUser/userWork";

export default {
  name: "TestItem",
  components: {AddFlaw, UserAndAvatar},
  dicts: [
    'test_status',          // 测试状态
    'test_outcome',         // 测试结果
    'test_priority',        // 测试优先级
    'work_status',          // 工作状态
    'priority',             // 优先级
    'work_type',            // 工作类型
    'order_of_severity',    // 严重程度
    'defect_class',         // 缺陷类型
    'recurrence_probability', // 重现概率
    'work_risk',            // 工作风险
    'sprint_status',        // 迭代状态
    'release_status'        // 发布状态
  ],
  data() {
    return {
      work: {},
      flawList: [],
      showAddFlaw: false,
      testStatusType: [],
      nowOutCome: '',
      testStepList: [],
      labelStyle: {
        width: '200px'
      },
      activeIndex: '1',
      activeNames: ['1', '2', '3', '4', '5', '6'], // 默认展开所有折叠项
      item: {},
      childItem: [],
      fileList: [],
    };
  },
  props: {
    testId: {
      type: Number,
      default: 1,
    },
  },
  watch: {
    testId: {
      handler() {
        this.getData()
      },
      immediate: true
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {

      getDicts("test_outcome").then(response => {
        this.testStatusType = response.data;
      })
      getTestAllInit(this.testId).then(({data}) => {
        this.item = data.test;
        this.flawList = data.flaws;
        this.testStepList = data.testSteps
        this.work = data.work || {}
      });
    },
    showFlawItem(row) {

    },
    save() {
      // 实现保存逻辑
      this.item.outcome = this.nowOutCome
      editTestAndTestStepVo({test: this.item, testSteps: this.testStepList}).then(() => {
        this.$modal.msgSuccess("保存成功");
        this.$emit('upData')
      })
    },
  }
};
</script>
<style lang="scss" scoped>
.result-container {
  display: flex;
  flex-direction: column;
}

.tag-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.button-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.new-defect {
  background-color: #f56c6c;
  color: white;
}

.new-defect:hover {
  background-color: #d9534f;
}

.save {
  background-color: #409eff;
  color: white;
}

.save:hover {
  background-color: #337ecc;
}


.avatar-wrapper {
  display: inline-block;
  border-radius: 12px; /* 圆角 */
  transition: all 0.3s ease;
}

.avatar-wrapper:hover {
  border: 2px solid #007bff; /* 鼠标悬停时显示边框 */
  padding: 2px;
  border-radius: 12px;
  cursor: pointer;
}


/* 处理中心 */
.processing-center {
  font-size: 16px;
  text-align: center;
  color: #999;
}

/* 折叠面板 */
.el-collapse-item__header {
  cursor: pointer;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: #f0faff;
  }
}

/* 动画 */
@keyframes fadeInPage {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
</style>
